/**
* Created by wl
* 项目管理>持有中-列表页
*/
<template>
    <div>
        <div class="right">
            <el-row  class="ca-title">
                <el-col :span="10">
                    <h3>持有中项目</h3>
                </el-col>
                <el-col :span="14">
                    <div class="ca-pull-right">
                        <el-button icon="el-icon-plus" @click="add" :disabled="!isAuthIndexAdd" class="ca-color-download">新建持有中项目</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-form ref="form" :model="form" status-icon class="ca-box ca-m-t-15" align="center">
                <el-row class="ca-m-t-20">
                    <el-col :span="7">
                        <el-form-item label="行业：" label-width="120px">
                            <el-select v-model="current.industry" style="width: 100%;">
                                <el-option label="全部" value=''></el-option>
                                <el-option
                                v-for="item in dropDown.industry"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="投资基金：" label-width="120px">
                            <el-select v-model="current.fundId" style="width: 100%;">
                                <el-option label="全部" value=''></el-option>
                                <el-option
                                v-for="item in fundList"
                                :key="item.id"
                                :label="item.fundName"
                                :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="项目名称：" label-width="120px">
                           <el-input v-model="current.itemName" placeholder="支持模糊搜索" @keyup.enter.native="getList"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="ca-m-b-20">
                    <el-col :span="24" align="center">
                        <el-button type="primary" @click="getList">查询</el-button>
                        <el-button type="primary" :disabled="!isNoAuth('持有中项目-列表页-下载')" @click="downloadFile">下载</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="ca-m-t-15">
                <el-table
                    :data="holdingData"
                    @sort-change="sortChange"
                    class="ca-table table_p_01 el-wid-100">
                    <el-table-column label="序号" type="index" align="center" width="80px">
                        <template slot-scope="scope">
                            <csRedDot :label="(current.pageIndex-1)*current.pageSize+scope.$index+1+''"
                            :showDot="scope.row.red==1?true:false" :type="1"></csRedDot>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="项目名称"
                        prop="itemName"
                        sortable="custom">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.itemName" placement="top" v-if="scope.row.itemName">
                                <el-button type="text" class="ca-underline ca-text-over-flow-ellipsis" @click="goIndex(scope.row)" :disabled="!getDetailIsNoAuth()">{{scope.row.itemName}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="投资基金"
                        prop="fundName"
                        sortable="custom">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.fundName" placement="top" v-if="scope.row.fundName">
                                <el-button type="text" class="ca-underline ca-text-over-flow-ellipsis" @click="goFundIndex(scope.row)">{{scope.row.fundName}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="investDateFirst"
                        label="投资时间"
                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.investDateFirst == null ? '' : $moment(scope.row.investDateFirst).format('YYYY-MM-DD')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="totalCapital"
                        label="目前投资金额</br>（万元）"
                        :render-header="renderTitle"
                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.totalCapital | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="finalHolding"
                        label="目前持有股数</br>（万股）"
                        :render-header="renderTitle"
                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.finalHolding | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="investCost"
                        label="目前持有成本</br>（股/元）"
                        :render-header="renderTitle"
                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.investCost | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="holdScale"
                        label="持股比例"
                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.holdScale | format1}}%
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="industry "
                        label="行业"
                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.industry | getNameById('industry')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="prostatus "
                        label="轮次"
                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.prostatus | getNameById('prostatus')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="del(scope.row)" :disabled="!isAuthIndexDelete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current.pageIndex"
            :page-sizes="vuePageSizes"
            :page-size="vuePageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            class="use-list-pagination ca-m-t-20">
            </el-pagination>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                isAuthIndexAdd: isNoAuth('持有中项目-列表页-新建'),
                isAuthIndexLoad: isNoAuth('持有中项目-列表页-下载'),
                isAuthIndexDelete: isNoAuth('持有中项目-列表页-删除'),
                isAuthList: isNoAuth('持有中项目-列表页-查看'),
                tabList: ['项目详情', '高管/股东', '投资减持', '财务数据', '投资服务', '项目文件', '项目预警'],//tab名称
                downLoadName: '',
                form: {
                    name: '',
                },
                holdingData: [],
                fundList: [], //投资基金
                totalCount: 0,
                current: {
                    orderBy: '', //排序名称
                    sort: '', //排列顺序
                    itemName: '', // 项目名称
                    industry: '', // 项目行业
                    fundId: '', // 投资基金
                    pageIndex: 1, // 页号
                    pageSize: this.vuePageSize, // 每页条数
                },
                currentCopy: {
                    orderBy: '', //排序名称
                    sort: '', //排列顺序
                    itemName: '', // 项目名称
                    industry: '', // 项目行业
                    fundId: '', // 投资基金
                    pageIndex: 1, // 页号
                    pageSize: this.vuePageSize, // 每页条数
                },
                dropDown: {
                    industry: this.$store.state.user.dictionaryMap.industry, // 行业
                },
            }
        },
        watch: {

        },
        props: {},
        mounted() {
            this.getList()
            this.getFundList()
        },
        beforeRouteEnter(to, from, next) {
            next(vm=>{
                if (!vm.isAuthList) {
                    vm.$message({
                        message: '没有此页面的操作权限',
                        type: 'error',
                        center: true
                    });
                    vm.$router.replace({name: 'personal-center', params: {tabIndex: 0}})
                    return;
                }
            });
        },
        methods: {
            handleSizeChange(val) {
                this.current.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.current.pageIndex = val;
                if (val > this.totalPage) {
                    this.current.pageIndex = this.totalCount
                }
                this.getList();
            },
            getDetailIsNoAuth() {
                let flag = false;
                for (let i = 0; i < this.tabList.length; i++) {
                    if (isNoAuth(`持有中项目-${this.tabList[i]}-查看`)) {
                        flag = true
                    }
                }
                if (flag) {
                    return flag
                }
                return flag
            },
            add() {
                this.$router.push({name: 'invested-project-add', params: {itemId: '-1', openWindow: true }});
            },
            getList() {
                // this.downLoadName = this.current.itemName
                apiHttp(api.INVESTED_LIST,this.current).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.holdingData = ret.data.resultData;
                        this.totalCount = ret.data.totalCount;
                        this.currentCopy = Object.assign({}, this.current);
                    }
                })
            },
            // 获取搜索的基金列表
            getFundList() {
                this.fundList = []
                apiHttp(api.GET_LIST,this.current).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fundList = ret.data
                    }
                })
            },
            del(row) {
                let that = this
                let query = {
                    itemId: row.id
                }
                this.$confirm('是否确认删除此条项目?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    showClose: false,
                }).then(async () => {
                    //删除项目
                    apiHttp(api.DEL_INVESTED, query).then(ret => {
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            that.$message({
                                message: '数据删除成功！',
                                type: 'success',
                                center: true
                            });
                            that.getList();
                        }
                    })
                });
            },
            goIndex(row) {
                this.$router.push({name: 'invested-project-detail', params: {itemId: row.id, tabIndex: 0, openWindow: true }});
            },
            goFundIndex(row) {
                if (row.fundClick) {
                    this.$router.push({name: 'invested-fund', params: {fundId: row.fundId, tabIndex: 0, openWindow: true }});
                }
            },
            //文件下载
            downloadFile() {
                 if (this.holdingData.length === 0) {
                     this.$message({
                         type: 'warning',
                         message: '暂无数据!',
                         center: true,
                     });
                 } else {
                     window.open(this.baseURL + api.EXPORT_FILE.url + '?X-Token=' + this.$store.state.user.token + '&type=2&name=' + this.currentCopy.itemName + '&industry=' + this.currentCopy.industry + '&fundId=' + this.currentCopy.fundId);
                 }
            },
            //排序
            sortChange(params) {
                if (!params.order) {
                     this.current.orderBy = '';
                     this.current.sort = '';
                 } else {
                     this.current.sort = params.order === 'ascending' ? 'asc' : 'desc';
                     this.current.orderBy = params.prop;
                     this.getList();
                 }
            },
        },
        components: {
            csRedDot: require('__components/red-dot'), // 小红点
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.use-list-pagination{
    margin: 31px  25%;
}
.el-wid-100 {
    width: 100%;
}
</style>
